<template>
  <div>
    <van-nav-bar title="选择预约时间" right-text="确定" left-arrow @click-left="booking" @click-right="ok"
    />
    <van-cell-group>
      <van-cell title="开始时间" is-link @click="showDialoga = true">
        {{ time.startTime }}
      </van-cell>
      <van-cell title="结束时间" is-link @click="showDialogb = true">
        {{ time.endTime }}
      </van-cell>
    </van-cell-group>


<!--    选择开始时间-->

    <!-- 弹窗 -->
    <van-dialog
        v-model="showDialoga"
        title="选择时间"
        @confirm="onConfirma"
        @cancel="onCancela"
    >
      <van-datetime-picker
          v-model="time.startTime"
          type="datetime"
          title="请选择时间"
          :min-date="minDate"
          :max-date="maxDate"
          @confirm="onDateTimeConfirma"
          @cancel="onCancela"
      />
    </van-dialog>


<!--    选择结束的时间-->
    <!-- 弹窗 -->
    <van-dialog
        v-model="showDialogb"
        title="选择时间"
        @confirm="onConfirmb"
        @cancel="onCancelb"
    >
      <van-datetime-picker
          v-model="time.endTime"
          type="datetime"
          title="请选择时间"
          :min-date="minDate"
          :max-date="maxDate"
          @confirm="onDateTimeConfirmb"
          @cancel="onCancelb"
      />
    </van-dialog>

  </div>
</template>

<script>
export default {
  data() {
    return {
      time:{},
      showDialoga: false,
      showDialogb: false,
      dateTime: new Date(), // 默认选择当前时间
      minDate: new Date(), // 最小日期，可以设置为当前日期或其他
      maxDate: new Date(2029, 0, 1), // 最大日期，可以设置为未来某个日期
    };
  },
  created() {

    this.time={}

  },
  methods: {



    booking(){
      this.time.createTime=''
     this.time.endTime=''

      sessionStorage.setItem('createTime',this.time.createTime)
      sessionStorage.setItem('endTime',this.time.endTime)

      this.$router.go({path:'/yuyue'})
    },

    ok(){

      this.time.createTime=this.time.startTime
      this.time.endTime=this.time.endTime

      sessionStorage.setItem('createTime',this.time.createTime)
      sessionStorage.setItem('endTime',this.time.endTime)

      this.$router.go(-1)
    },



    onConfirma() {
      // 确认按钮的逻辑

        this.$toast('请点击上边的确定按钮');
    },
    onCancela() {
      // 取消按钮的逻辑
      console.log('选择时间已取消');
      this.showDialoga = false; // 关闭弹窗
    },
    onDateTimeConfirma(value) {
      // 日期时间确认的逻辑
      this.time.startTime = value;
      console.log('选择开始时的时间(上边的确定):', this.time.startTime);
      this.showDialoga=false; // 关闭弹窗
      let  date=new Date(this.time.startTime);
      this.time.startTime = date.toString();
      this.time.startTime = this.formatDate(this.time.startTime); // 格式化时间
      console.log('选择开始时的时间(格式化后):', this.time.startTime);
    },


  //   选择结束时间的操作
    onConfirmb() {
      // 确认按钮的逻辑
      this.$toast('请点击上边的确定按钮');
    },
    onCancelb() {
      // 取消按钮的逻辑
      console.log('选择时间已取消');
      this.showDialoga = false; // 关闭弹窗
    },
    onDateTimeConfirmb(value) {
      // 日期时间确认的逻辑

      this.time.endTime = value;
      console.log('选择结束时的时间(上边的确定):', value);
      this.showDialogb=false; // 关闭弹窗
      // 进行格式化
      let date=new Date(this.time.endTime);
      this.time.endTime = date.toString();
      this.time.endTime = this.formatDate(this.time.endTime);
      // 格式化时间
      console.log('选择结束时的时间(格式化后):', this.time.endTime);
    },



    //修改时间类型
    formatDate(dateString) {
      const parts = dateString.split(' ');
      const date = new Date(`${parts[3]}-${this.getMonthNumber(parts[1])}-${parts[2]} ${parts[4]}`);
      const year = date.getFullYear();
      const month = ('0' + (date.getMonth() + 1)).slice(-2);
      const day = ('0' + date.getDate()).slice(-2);
      const hour = ('0' + date.getHours()).slice(-2);
      const minute = ('0' + date.getMinutes()).slice(-2);
      const second = ('0' + date.getSeconds()).slice(-2);
      return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
    },
    getMonthNumber(monthName) {
      const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
      return ('0' + (months.indexOf(monthName) + 1)).slice(-2);
    },



  },
};
</script>




